<template>
  <div class="equipState" ref="equipState"></div>
</template>

<script lang="ts">
export default {
  name: "equipState"
};
</script>

<script setup lang="ts">
import { ECharts } from "echarts";
import echarts from "/@/plugins/echarts";
import { onMounted, nextTick, ref, reactive } from "vue";
import { tryOnUnmounted, useTimeoutFn } from "@vueuse/core";

import {
  addResizeListener,
  removeResizeListener
} from "element-plus/lib/utils/resize-event";

import { postProjectMngList } from "/@/api/project";

const equipState = ref<HTMLElement | null>(null) as any;

let echartInstance: ECharts;

let xAxisData = ref([]);
let seriesData = ref([]);

let formInline = reactive({
  projectNameLike: "",
  projectRegionCode: "",
  projectFactoryCode: "",
  projectLeaderNameLike: "",
  projectTypeCode: "",
  projectYear: "",
  createTimeStrStart: "",
  createTimeStrEnd: "",
  pageNum: 1,
  pageSize: 10
});

function initechartInstance(xAxisData?, seriesData?) {
  const echartDom = document.querySelector(".equipState");
  if (!echartDom) return;
  // @ts-ignore
  echartInstance = echarts.init(echartDom);
  echartInstance.clear(); //清除旧画布 重新渲染

  echartInstance.setOption({
    title: {
      text: "事项状态概览",
      textStyle: {
        fontSize: 16,
        fontWeight: "normal",
        padding: 10
      }
    },
    color: ["#00e6ad", "#ffc500", "#59a0ff"],
    tooltip: {
      trigger: "item"
    },
    // series: seriesData
    series: [
      {
        type: "pie",
        radius: "50%",
        data: [
          { value: 120, name: "已完成" },
          { value: 234, name: "处理中" },
          { value: 500, name: "未启动" }
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)"
          }
        },
        label: {
          show: true,
          lineHeight: 20,
          formatter: "{b}\n{c}({d}%)"
        }
      }
    ]
  });
}

const initProjectNum = async () => {
  try {
    const { code, data } = await postProjectMngList(formInline);
    if (code === 200) {
      // xAxisData.value = data.xAxisData;
      // const dataKey = Object.keys(data.multiSeriesData);
      // seriesData.value = dataKey.map(item => {
      //   return {
      //     name: item,
      //     data: data.multiSeriesData[item],
      //     type: "line",
      //     label: {
      //       show: true
      //     }
      //   };
      // });
      nextTick(() => {
        initechartInstance(xAxisData.value, seriesData.value);
      });
    }
  } catch (err) {
    console.log(err);
  }
};

initProjectNum();

onMounted(() => {
  nextTick(() => {
    addResizeListener(equipState.value, resetRender);
  });
  // useEventListener("resize", () => {
  //   console.log("resize");
  //   if (!echartInstance) return;
  //   useTimeoutFn(() => {
  //     echartInstance.resize();
  //   }, 180);
  // });
});

const resetRender = () => {
  if (!echartInstance) return;
  useTimeoutFn(() => {
    echartInstance.resize();
  }, 180);
};

tryOnUnmounted(() => {
  if (!echartInstance) return;
  echartInstance.dispose();
  echartInstance = null;
  removeResizeListener(equipState.value, resetRender);
});
</script>

<style lang="scss" scoped>
.equipState {
  width: 100%;
  height: 100%;
}
</style>
